<template>
	<view class="container">
		<block>
			<form @submit="formSubmit">
				<view class="content1">
					<view class="top flex">
						<view class="f1">
							<image src="/static/img/exp_ji.png"></image>
						</view>
						<view class="f2" v-if="address.id" @tap="goto" data-url="address?fromPage=mail&mailtype=1">
							<view class="t1">{{address.name}} {{address.tel}}</view>
							<view class="t2">{{address.area}} {{address.address}} </view>
						</view>
						<view class="f2" v-else @tap="goto" data-url="addressadd?fromPage=mail&mailtype=1">
							<view class="t1">寄件人信息</view>
							<view class="t2">点击填写寄件地址,自动智能填写 </view>
						</view>
						<view class="f3" @tap="goto" data-url="address?fromPage=mail&mailtype=1">
							<view>
								<image src="/static/img/exp_txl.png"></image>
							</view>
							<view class="t3">地址薄</view>
						</view>
					</view>
					<view class="top2 flex">
						<view class="f1">
							<image src="/static/img/exp_shou.png"></image>
						</view>
						<view class="f2" v-if="address2.id" @tap="goto" data-url="address?fromPage=mail&mailtype=2">
							<view class="t1">{{address2.name}} {{address2.tel}}</view>
							<view class="t2">{{address2.area}} {{address2.address}} </view>
						</view>
						<view class="f2" v-else @tap="goto" data-url="addressadd?fromPage=mail&mailtype=2">
							<view class="t1">收件人信息</view>
							<view class="t2">复制完整信息，自动智能填写</view>
						</view>
						<view class="f3" @tap="goto" data-url="address?fromPage=mail&mailtype=2">
							<view>
								<image src="/static/img/exp_txl.png"></image>
							</view>
							<view class="t3">地址薄</view>
						</view>
					</view>
				</view>


				<view class="form">
					<view class="form-item">
						<text class="label">物品信息</text>
						<input class="input" type="text" placeholder="请输入物品信息"
							placeholder-style="font-size:28rpx;color:#BBBBBB" name="cargo"></input>
					</view>
					<view class="form-item">
						<text class="label">预估重量</text>
						<view class="addnum">
							<view class="minus">
								<image class="img" src="/static/img/cart-minus.png" @tap="minus" />
							</view>
							<input class="input" type="number" :value="this.weight"></input>KG &nbsp;
							<view class="plus">
								<image class="img" src="/static/img/cart-plus.png" @tap="plus" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<text class="label">选择配送公司</text>
						<picker v-if="expressdata" @change="expresschange" :value="express_index" :range="expressdata"
							style="font-size:28rpx;padding:10rpx;height:70rpx;border-radius:4px;flex:1">
							<view class="picker" style="height:70rpx;" @tap="changeyl">
								{{expressdata[express_index]?expressdata[express_index]:'请选择配送公司'}}</view>
						</picker>
						<view v-else class="picker" style="height:70rpx;" @tap="changeyl">
							{{expressdata[express_index]?expressdata[express_index]:'请选择配送公司'}}</view>
						<image src="/static/img/arrowright.png" class="icon">
					</view>
					<view class="form-item">
						<text class="label">期望上门时间</text>
						<view class="input" @tap="choosePstime" :data-bid="0">
							{{pstimetext==''?'请选择上门时间':pstimetext}}
						</view>
						<image src="/static/img/arrowright.png" class="icon">
					</view>


					<view class="form-item">
						<text class="label">给快递员留言</text>
						<input class="input" type="text" placeholder="options"
							placeholder-style="font-size:28rpx;color:#BBBBBB" name="remark"></input>
					</view>

				</view>
				<view v-if="showxieyi" class="xieyibox">
					<view class="xieyibox-content">
						<view style="overflow:scroll;height:100%;">
							<parse @navigate="navigate"></parse>
						</view>
						<view
							style="position:absolute;z-index:9999;bottom:10px;left:0;right:0;margin:0 auto;text-align:center; width: 50%;height: 60rpx; line-height: 60rpx; color: #fff; border-radius: 8rpx;"
							@tap="hidexieyi">已阅读并同意</view>
					</view>
				</view>
				<view class="bottom flex">
					<view class="left">
						<view>
							<text class="t1" v-if="price">￥{{price}}</text>
							<text class="t1" v-else>￥--</text>
							<text class="t2">预估运费</text>
						</view>
						<view class="t3">注：费用以实际寄件为准</view>
					</view>
					<view>
						<button class="tobuy" :style="{background:t('color1')}" form-type="submit">下单</button>
					</view>
				</view>
			</form>
		</block>

		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>

		<view v-if="pstimeDialogShow" class="popup__container">
			<view class="popup__overlay" @tap.stop="hidePstimeDialog"></view>
			<view class="popup__modal">
				<view class="popup__title">
					<text class="popup__title-text">请选择上门时间</text>
					<image src="/static/img/close.png" class="popup__close" style="width:36rpx;height:36rpx"
						@tap.stop="hidePstimeDialog" />
				</view>
				<view class="popup__content">
					<view class="pstime-item" v-for="(item, index) in pstimeArr" :key="index" @tap="pstimeRadioChange"
						:data-index="index">
						<view class="flex1">{{item.title}}</view>
						<view class="radio" :style="sm_time==item.value ? 'background:'+t('color1')+';border:0' : ''">
							<image class="radio-img" src="/static/img/checkd.png" />
						</view>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pre_url: app.globalData.pre_url,
				platform: '',
				platformname: '',
				platformimg: 'weixin',
				showxieyi: false,
				isagree: false,
				smsdjs: '',
				tel: '',
				hqing: 0,
				frompage: '/pages/express/mail',
				address: [],
				expressdata: [],
				express_index: -1,
				express_no: '',
				pstimeDialogShow: false,
				pstimetext: '',
				sm_time: '',
				address2: [],
				weight: 1,
				price: 0
			};
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
		},
		methods: {
			getdata: function() {
				var that = this;
				app.get('ApiExpress/getAddress', {}, function(res) {
					that.loading = false;
					if (res.status == 0) {
						if (res.msg) {
							app.alert(res.msg)
						}
					}
					//that.expressdata = res.data.expressdata;
					that.address = res.data.address;
					that.address2 = res.data.address2;
					that.addressid = that.address.id
					that.address2id = that.address2.id
					that.pstimeArr = res.data.pstimeArr;
					that.loaded();
				});
			},
			regionchange(e) {
				const value = e.detail.value
				console.log(value[0].text + ',' + value[1].text + ',' + value[2].text);
				this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text
			},
			expresschange: function(e) {
				var that = this
				that.express_index = e.detail.value;

				this.getprice()
			},
			changeyl: function(e) {
				var that = this
				if (!that.address2id) {
					app.alert('请填写寄件地址');
					return;
				}
				app.get('ApiExpress/getYunli', {
					addressid: that.address2id
				}, function(res) {
					if (res.status == 1) {
						that.expressdata = res.data
					} else {
						app.error(res.msg);
						return;
					}
				})

			},
			getprice: function(e) {
				var that = this;
				var company = that.expressdata[that.express_index];
				var weight = that.weight;
				var addressid = that.addressid;
				var address2id = that.address2id;
				app.post('ApiExpress/getPrice', {
					addressid: addressid,
					address2id: address2id,
					company: company,
					weight: weight
				}, function(res) {
					if (res.status == 1) {
						that.price = res.data.combos[0].price
					} else {
						that.price = '';
					}
				});
			},
			choosePstime: function(e) {
				var that = this;
				var bid = e.currentTarget.dataset.bid;
				var pstimeArr = that.pstimeArr;
				var itemlist = [];
				for (var i = 0; i < pstimeArr.length; i++) {
					itemlist.push(pstimeArr[i].title);
				}
				if (itemlist.length == 0) {
					app.alert('当前没有可选时间段');
					return;
				}
				that.nowbid = bid;
				that.pstimeDialogShow = true;
				that.pstimeIndex = -1;
			},
			pstimeRadioChange: function(e) {
				var that = this;
				var pstimeIndex = e.currentTarget.dataset.index;
				var choosepstime = that.pstimeArr[pstimeIndex];
				that.pstimetext = choosepstime.title;
		 	that.sm_time = choosepstime.value;
				that.pstimeDialogShow = false;
			},
			hidePstimeDialog: function() {
				this.pstimeDialogShow = false;
			},
			formSubmit: function(e) {
				var that = this;
				var formdata = e.detail.value;
				var addressId = that.opt.id || '';
				var cargo = formdata.cargo;
				var company = that.expressdata[that.express_index];
				var sm_time = that.sm_time;
				var addressid = that.addressid;
				var address2id = that.address2id;
				if (!addressid) {
					app.error('请添加寄件地址');
					return;
				}
				if (!address2id) {
					app.error('请添加收件地址');
					return;
				}
				if (company == '') {
					app.error('请先择配送公司');
					return;
				}
				if (sm_time == '') {
					app.error('请先择上门时间');
					return;
				}
				app.showLoading('提交中');
				app.post('ApiExpress/createOrder', {
					type: that.type,
					addressid: addressid,
					address2id: address2id,
					cargo: cargo,
					company: company,
					sm_time: sm_time,
					remark: formdata.remark,
					weight: that.weight
				}, function(res) {
					app.showLoading(false);
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					}
					app.success('寄件成功');
					setTimeout(function() {
						//app.goback(true);
					}, 1000);
				});
			},

			bindPickerChange: function(e) {
				var val = e.detail.value;
				this.regiondata = val;
			},
			setaddressxx: function(e) {
				this.addressxx = e.detail.value;
			},
			//减
			minus: function(e) {
				var num = this.weight;
				if (num > 1) {
					this.weight = num - 1;
				}
				this.getprice()
			},
			//加
			plus: function(e) {
				var num = this.weight;
				this.weight = num + 1;
				this.getprice()
			}
		}
	}
</script>
<style>
	.content1 {
		background: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 12rpx;
	}

	.content1 .top2 {
		margin-top: 20px;
		border-top: 1px solid #eee;
		padding-top: 30rpx;
	}

	.content1 .f1 {
		height: 130rpx;
		display: flex;
		align-items: center;
		margin-right: 20rpx
	}

	.content1 .f1 image {
		width: 48rpx;
		height: 48rpx;
		line-height: 100rpx;
	}

	.content1 .f2 {
		border-right: 1px solid #eee;
		width: 80%;
	}

	.content1 .f2 .t1 {
		color: #222;
		font-size: 32rpx;
		font-weight: bold;
	}

	.content1 .f2 .t2 {
		color: #909090;
		font-size: 24rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.content1 .f3 {
		width: 180rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.content1 .f3 image {
		width: 32rpx;
		height: 32rpx;
	}

	.content1 .f3 .t3 {
		text-align: center;
	}

	.form {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 5px;
		padding: 0 3%;
		background: #FFF;
	}

	.form .form-item {
		display: flex;
		width: 100%;
		height: 98rpx;
		justify-content: space-between;
	}

	.form-item:last-child {
		border: 0
	}

	.form-item .label {
		color: #222;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		text-align: left;
		width: 200rpx;
		padding-right: 20rpx
	}

	.form-item .input {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		text-align: right
	}

	.xieyibox {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.7)
	}

	.xieyibox-content {
		width: 90%;
		margin: 0 auto;
		height: 80%;
		margin-top: 20%;
		background: #fff;
		color: #333;
		padding: 5px 10px 50px 10px;
		position: relative;
		border-radius: 2px
	}

	.bottom {
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		padding: 30rpx;
		justify-content: space-between;
	}

	.bottom .left .t1 {
		color: #FD4A46;
		font-size: 40rpx;
		font-weight: bold;
	}

	.bottom .left .t2 {
		color: #BBB;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.bottom .left .t3 {
		color: #BBB;
		font-size: 20rpx;
	}

	.bottom .tobuy {
		width: 240rpx;
		line-height: 72rpx;
		color: #fff;
		border-radius: 40rpx;
		background-color: #007AFF;
		border: none;
		font-size: 28rpx;
		font-weight: bold;
		height: 80rpx;
	}

	.form-item .icon {
		width: 32rpx;
		height: 32rpx;
		margin-top: 20rpx;
	}

	.picker {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-align: right;
		line-height: 50rpx;
	}

	.pstime-item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		padding: 20rpx 30rpx;
	}

	.pstime-item .radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
		margin-right: 30rpx
	}

	.pstime-item .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.addnum {
		font-size: 30rpx;
		color: #666;
		width: auto;
		display: flex;
	}

	.form-item .addnum input {
		width: 80rpx;
		text-align: center;
		margin-top: -10rpx;
	}

	.addnum .plus {
		width: 48rpx;
		height: 36rpx;
		background: #F6F8F7;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.addnum .minus {
		width: 48rpx;
		height: 36rpx;
		background: #F6F8F7;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.addnum .img {
		width: 24rpx;
		height: 24rpx
	}

	.addnum .i {
		padding: 0 20rpx;
		color: #2B2B2B;
		font-weight: bold;
		font-size: 24rpx
	}
</style>
